<template>
  <div>
    <el-row :getter='20'>
      <!-- 进度条 -->
      <el-col :span="4">
        <steps :steps='steps'></steps>
      </el-col>
      <!-- 上架操作区 -->
      <el-col :span="20">
        <!-- 设置基本信息 -->
        <common-form v-if="steps.active === 0" :form="productBaseMessageForm"></common-form>

        <!-- 设置规格参数 -->
        <SetSpecification v-if="steps.active === 1 && specificationsForm.length > 0"
          :specificationsForm='specificationsForm'></SetSpecification>

        <!-- 设置销售属性 -->
        <SetSaleAttr ref='SetSaleAttr' v-if="steps.active === 2 && setSaleAttrForm.length > 0"
          :setSaleAttrForm='setSaleAttrForm'></SetSaleAttr>

        <!-- 设置sku信息 -->
        <SetSku ref='SetSku' v-if="steps.active === 3" :saleAttr='saleAttr' :productAttrDoList="productAttrDoList"></SetSku>
      </el-col>
    </el-row>
    <!-- 底部按钮 -->
    <el-row :getter="20">
      <el-col :span="24">
        <div style="text-align:center">
          <el-button size="mini" @click='upStep()'> 上一步 </el-button>
          <el-button size="mini" @click='nextStep()'> 下一步 </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import steps from '../../../components/commonSteps/index.vue'
  import CommonForm from '../../../components/commonForm/index.vue'
  import CommonFormEnum from '../../../components/enum/CommonFormEnum'
  import BaseVue from '../../../components/BaseVue.vue'
  import SetSpecification from '../../../components/customModule/SetSpecifications.vue'
  import SetSaleAttr from '../../../components/customModule/SetSaleAttr.vue'
  import SetSku from '../../../components/customModule/SetSku.vue'
  import {
    errorMessage
  } from '../../../utils/Message.js'
  export default {
    name: 'releaseProduct',
    extends: BaseVue,
    components: {
      steps,
      CommonForm,
      SetSpecification,
      SetSaleAttr,
      SetSku,
    },
    created() {
      // 初始化商品分类
      this.getProductList()
      this.getBrandList()
    },
    data() {
      return {
        steps: {
          height: '500px',
          active: 0,
          step: [{
              title: '设置基本信息',
            },
            {
              title: '设置规格参数',
            },
            {
              title: '设置销售属性',
            },
            {
              title: '设置SKU信息',
            },
            {
              title: '完成',
            },
          ]
        },
        // 设置基本信息
        productBaseMessageForm: {
          title: '设置基本信息',
          originalData: {
            spuName: null,
            spuDescription: null,
            weight: null,
            catalogId: null,
            brandId: null,
            sort: null,
            publishStatus: null,
            growBounds: null,
            buyBounds: null,
            decript: null,
            imgUrl: null,
          },
          columns: [{
              label: '商品名称',
              prop: 'spuName',
              type: CommonFormEnum.INPUT,
              required: true,
              labelWidth: '120px'
            },
            {
              label: '商品描述',
              prop: 'spuDescription',
              type: CommonFormEnum.INPUT,
              inputType: 'textarea',
              required: true,
              labelWidth: '120px'
            },
            {
              label: '商品分类',
              prop: 'catalogId',
              type: CommonFormEnum.Cascader,
              required: true,
              options: [],
              labelWidth: '120px'
            },
            {
              label: '商品品牌',
              prop: 'brandId',
              type: CommonFormEnum.SELECT,
              required: true,
              labelWidth: '120px'
            },
            {
              label: '商品重量',
              prop: 'weight',
              type: CommonFormEnum.Number,
              required: true,
              precision: 2,
              labelWidth: '120px'
            },
            {
              label: '商品积分',
              prop: 'buyBounds',
              type: CommonFormEnum.Number,
              required: true,
              precision: 0,
              labelWidth: '120px'
            },
            {
              label: '购买成长值',
              prop: 'growBounds',
              type: CommonFormEnum.Number,
              required: true,
              labelWidth: '120px'
            },
            {
              label: '商品介绍',
              prop: 'decript',
              type: CommonFormEnum.BeachUpload,
              required: true,
              labelWidth: '120px'
            },
            {
              label: '商品图集',
              prop: 'imgUrl',
              type: CommonFormEnum.BeachUpload,
              required: true,
              labelWidth: '120px'
            },
          ],
        },
        // 设置规格参数
        specificationsForm: [],
        // 设置销售属性
        setSaleAttrForm: [],
        // 删除未选中的销售属性
        saleAttr: [],
        // 已设置SKU信息
        productAttrDoList:null,
      }
    },
    methods: {
      // 上一步
      upStep() {
        this.steps.active--
        if (this.steps.active === 1) {
          this.selectAttrGroupAndAttr(true)
        }
        if (this.steps.active === 2) {
          this.selectAttrGroupAndAttr(false)
        }
        if (this.steps.active === 3) {

        }
        if (this.steps.active === 4) {

        }
      },

      // 下一步
      nextStep() {
        this.steps.active++
        console.log('------------------------------>',this.productBaseMessageForm.originalData)
        if (this.steps.active === 1) {
          if (this.productBaseMessageForm.originalData.catalogId)
            this.selectAttrGroupAndAttr(true)
          else {
            this.steps.active--
            return errorMessage('请先选择商品分类')
          }
        }
        if (this.steps.active === 2) {
          if (this.productBaseMessageForm.originalData.catalogId)
            this.selectAttrGroupAndAttr(false)
          else {
            this.steps.active--
            return errorMessage('请先选择商品分类')
          }
        }
        if (this.steps.active === 3) {
          let returnSetSaleAttrForm = this.$refs['SetSaleAttr'].returnSetSaleAttrForm();
          this.getProductSkuCombination(returnSetSaleAttrForm)
        }
        if (this.steps.active === 4) {
          let productAttrDoList = this.$refs['SetSku'].retyrnProductAttrDoList();
            console.log('productAttrDoList =',productAttrDoList)
            console.log('this.setSaleAttrForm',this.setSaleAttrForm)
        }
      },

      // 获取商品三级分类
      getProductList() {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productcategory/classification'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            let resource = data.data.data
            if (resource) {
              let props = {
                label: 'name',
                value: 'catId'
              }
              this.productBaseMessageForm.columns[2].options = this.startRecursionTreeData(resource, props)
            }
          })
        })
      },
      // 获取品牌
      getBrandList() {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productbrand/brandList'),
            method: 'get',
            params: this.$http.adornParams()
          }).then((data) => {
            let resource = data.data.data
            if (resource) {
              let props = {
                label: 'name',
                value: 'catId'
              }
              this.productBaseMessageForm.columns[3].options = resource.map(k => {
                return {
                  label: k.name,
                  value: k.brandId
                }
              })
            }
          })
        })
      },
      // 获取商品基础信息
      selectAttrGroupAndAttr(isBaseAttr) {
        let catalogId = this.productBaseMessageForm.originalData.catalogId
        let obj = {
          catelogId: catalogId[catalogId.length - 1],
          isBaseAttr: isBaseAttr
        }
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.getRequest('product/productattrgroup/selectAttrGroupAndAttr'),
            method: 'post',
            data: this.$http.adornData(obj, false)
          }).then((data) => {
            let resource = data.data.data
            if (resource) {
              if (isBaseAttr) this.specificationsForm = resource
              else this.setSaleAttrForm = resource
            }
          })
        })
      },
      // 获取商品sku组合
      getProductSkuCombination(returnSetSaleAttrForm) {
        // 删除未选中的销售属性
        this.saleAttr = returnSetSaleAttrForm.map(k => {
          let obj = k
            obj.productAttrDoList= k.productAttrDoList.filter(v => {
             v.images = this.productBaseMessageForm.originalData.imgUrl
            if (v && v.value) return true;
            return false
          })
          return obj;
        })
        console.log('==================== > ',this.saleAttr)
        this.productAttrDoList = this.saleAttr[0].productAttrDoList
      }
    }
  }
</script>

<style>
</style>
